/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:51:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-29 17:07:36
 */
import CustomerSupport from "./CustomerSupport/CustomerSupport";
import Focus from "./Focus/Focus";
import Footer from "./Footer/Footer";
import Quality from "./Quality/Quality";
import ServiceCapability from "./ServiceCapability/ServiceCapability";
import homeRenderer from "./homeRender";
import logoPNG from "./img/logo.png";
import styles from './index.module.less';
import jiesjaoPNG from "./img/jiesjao.png";
import Assistance from "./Assistance/Assistance";
import Manufacture from "./Manufacture/Manufacture";
import hashHistory from "@hashHistory";
import loginStore from "../LoginModal/loginStore";
import clsx from "clsx";
import { useEffect, useState } from "react";
import { Affix, Button, Dropdown } from "antd";
import { divide } from "lodash";
import userStore from "@views/userStore";
import { autorun } from "mobx";
import LoginBtn from "../component/LoginBtn/LoginBtn";
import Copy from "./Copy/Copy";
import utils from "@utils";
import partCollaborateStore from "../PartCollaborate/partCollaborateStore";
import { LazyLoadImage } from 'react-lazy-load-image-component';

// 首页
const Home = () => {

    const [rendererHasBg, setRendererHasBg] = useState(true);
    const [isLogin, setIsLogin] = useState(userStore.isLogin);

    const afterRender = () => {
        if (rendererHasBg) {
            setRendererHasBg(false);
            homeRenderer.removeEventListener("afterRender", afterRender);
        }
    }

    useEffect(() => {
        homeRenderer.blastMesh.addEventListener("loaded", async () => {
            await new Promise(resolve => setTimeout(resolve, 50));
            setRendererHasBg(false);
        });
        homeRenderer.addEventListener("afterRender", afterRender);
    }, []);

    useEffect(() => autorun(() => {
        setIsLogin(userStore.isLogin);
    }), []);

    return (
        <>
            <div className={styles.headerMenu} >
                <LazyLoadImage src="./logo2.png" className={styles.logo} alt="" />
                <Dropdown
                    placement="bottom"
                    mouseEnterDelay={0}
                    menu={{
                        items: [
                            // {
                            //     key: '1',
                            //     label: (
                            //         <div className={styles.dropdownItem} >
                            //             <div className={clsx(styles.font16, styles.fontBold)} >模型图纸协作</div>
                            //         </div>
                            //     ),
                            // },
                            // {
                            //     key: '2',
                            //     label: (
                            //         <div className={styles.dropdownItem} >
                            //             <div className={clsx(styles.font16, styles.fontBold)} >物理仿真分析</div>
                            //         </div>
                            //     ),
                            // },
                            // {
                            //     key: '3',
                            //     label: (
                            //         <div className={styles.dropdownItem} >
                            //             <div className={clsx(styles.font16, styles.fontBold)} >可制造性分析</div>
                            //         </div>
                            //     ),
                            // },
                            {
                                key: '1',
                                label: (
                                    <div
                                        className={styles.dropdownItem}
                                        onClick={() => {
                                            if (userStore.isLogin) {
                                                hashHistory.push("/projectCollaboration");
                                            } else {
                                                loginStore.setShowLoginModal(true);
                                            }
                                        }}
                                    >
                                        <div className={clsx(styles.font16, styles.fontBold)} >PLM</div>
                                        <div className={styles.font12} >项目管理,CAD图纸和3D模型远程协作、评审、管理</div>
                                    </div>
                                ),
                            },
                            {
                                key: '2',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >
                                            AI3D
                                            <span className={styles.coming_soon} >即将上线</span>
                                        </div>
                                        <div className={styles.font12} >一句描述,一张图片即可生成工业级3D模型</div>
                                    </div>
                                ),
                            },
                            {
                                key: '3',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >
                                            AICAE
                                            <span className={styles.coming_soon} >即将上线</span>
                                        </div>
                                        <div className={styles.font12} >云端算力+大模型进行多物理仿真分析和可制造性分析</div>
                                    </div>
                                ),
                            },
                        ]
                    }}>
                    <span className={styles.btn}  >功能</span>
                </Dropdown>
                <Dropdown
                    placement="bottom"
                    mouseEnterDelay={0}
                    menu={{
                        items: [
                            {
                                key: '1',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >工业机械零部件按需制造</div>
                                        <div className={styles.font12} >全世界的制造商资源参与报价，覆盖机加工、铸造钣金、冲压、塑胶成型等服务。</div>
                                    </div>
                                ),
                            },
                            {
                                key: '2',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >赏金询盘</div>
                                        <div className={styles.font12} >悬赏接单，包括非标零部件加工、模组制造、OEM、原型验证、工程方案验证等主要类型。</div>
                                    </div>
                                ),
                            },
                            {
                                key: '3',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >标准件数据库</div>
                                        <div className={styles.font12} >面对各行业的不同产品提供原厂标准数据模型/工程图图纸</div>
                                    </div>
                                ),
                            },
                            {
                                key: '4',
                                label: (
                                    <div className={styles.dropdownItem}>
                                        <div className={clsx(styles.font16, styles.fontBold)} >3D打印</div>
                                        <div className={styles.font12} >FDM, SLS, SLA, MJF, Polyjet, DMLS, DLP</div>
                                    </div>
                                ),
                            },
                        ]
                    }}>
                    <span className={styles.btn} >服务</span>
                </Dropdown>
                <Dropdown
                    placement="bottom"
                    mouseEnterDelay={0}
                    menu={{
                        items: [
                            {
                                key: '1',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >航空航天</div>
                                    </div>
                                ),
                            },
                            {
                                key: '2',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >交通工具</div>
                                    </div>
                                ),
                            },
                            {
                                key: '3',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >农业器械</div>
                                    </div>
                                ),
                            },
                            {
                                key: '4',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >高端制造</div>
                                    </div>
                                ),
                            },
                            {
                                key: '5',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >研发机构</div>
                                    </div>
                                ),
                            },
                            {
                                key: '6',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >机器人</div>
                                    </div>
                                ),
                            },
                            {
                                key: '7',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >3c产品</div>
                                    </div>
                                ),
                            },
                            {
                                key: '8',
                                label: (
                                    <div className={styles.dropdownItem} >
                                        <div
                                            className={clsx(styles.font16, styles.fontBold)}
                                            style={{ textAlign: "center" }}
                                        >教育</div>
                                    </div>
                                ),
                            },
                        ]
                    }}>
                    <span className={styles.btn} >解决方案</span>
                </Dropdown>

                <div className={styles.right} >
                    {/* {isLogin && <span className={styles.btn} onClick={() => hashHistory.push("/fqrs")}>FQRs</span>} */}
                    {/* {isLogin && <span className={styles.btn} onClick={() => hashHistory.push("/userOrder")} >订单</span>} */}
                    {/* {isLogin && <span className={styles.btn}  >制造商</span>} */}
                    {/* {isLogin && <span className={styles.btn} onClick={() => hashHistory.push("/partsLibrary")} >零部件</span>} */}
                    {/* 登录按钮 */}
                    <LoginBtn isHome={true} />
                </div>
            </div>

            <div className={styles.home}>
                {/* <div className={styles.topBar} >This page is included in a free SaaS Website Kit. View the complete Kit →</div> */}
                <div className={styles.background} >


                    <div className={styles.banner} >
                        <div className={styles.left} >
                            <span
                                className={styles.version}
                                onClick={() => {
                                    partCollaborateStore.setFormPath(`/`, "首页");
                                    hashHistory.push("/partCollaborateDemo");
                                }}
                            >Demo Version 1.0</span>
                            <div className={styles.title}>智造无界触手可及</div>
                            <div className={styles.title2}>开启零部件协作加工新纪元</div>
                            <span className={styles.subTitle} >基于AI的产前分析和一站式零部件按需制造协同服务。最先进的工具+服务，为您的产品研发和科技创新提供最适合的解决方案</span>
                            <div style={{ marginTop: 50 }} >
                                <span
                                    className={styles.putDemand}
                                    onClick={() => {
                                        if (isLogin) {
                                            hashHistory.push("/updataModel");
                                        } else {
                                            loginStore.setShowLoginModal(true);
                                        }
                                    }}
                                >提交需求</span>
                                <span className={styles.learnMore} >了解更多 →</span>
                            </div>
                        </div>
                        <div className={clsx(styles.right, rendererHasBg && styles.bg)} ref={dom => homeRenderer.setContainer(dom)} ></div>
                    </div>
                </div>

                {/* 聚焦技术为定制提供强力支持 */}
                <Focus />

                {/* 服务能力 */}
                <ServiceCapability />

                {/* 质量 */}
                <Quality />

                <div className={styles.jiesjaoBg} >
                    <LazyLoadImage className={styles.jiesjaoImg} src={jiesjaoPNG} alt="" />
                </div>

                {/* 助力 */}
                <Assistance />

                {/* 一站式按需制造服务 */}
                <Manufacture />

                {/* 客户支持 */}
                <CustomerSupport />

                {/* 脚部位 */}
                <Footer />

                {/* {utils.isDev && <Copy />} */}

            </div>
        </>
    );
}

export default Home;